<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onTableRefresh('cus_name')">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					:columns="initColumns"
					:print="printParams"
					v-model="table.columns"
					@export-file="exportExcel"
					:border="false"
					align="top"
				>
					<el-row type="flex">
						<cl-filter-group v-model="search">
							<cl-filter label="所属事业部">
								<cl-select
									v-model="search.biz_id"
									placeholder="请选择"
									filterable
									@change="changeBiz"
								>
									<el-option
										v-for="item in business"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="分公司">
								<cl-select
									v-model="search.company_id"
									placeholder="请选择"
									filterable
									style="width: 150px"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />

									<el-option
										v-for="item in bizRefData.company"
										:key="item.company_id"
										:label="item.company_name"
										:value="item.company_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="品牌">
								<cl-select
									v-model="search.bra_id"
									placeholder="全部"
									filterable
									style="width: 150px"
									clearable
									multiple
									collapse-tags
									@change="refresh"
								>
									<el-option
										v-for="item in bizRefData.brand"
										:key="item.bra_id"
										:label="item.bra_name"
										:value="item.bra_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="所属部门">
								<cl-cascader
									clearable
									v-model="search.dept_ids"
									:options="deptList"
									collapse-tags
									style="min-width: 230px"
									:props="{
										multiple: true,
										value: 'dept_id',
										label: 'dept_name'
									}"
									filterable
									@change="changeDept"
								/>
							</cl-filter>
							<cl-filter label="所属人员">
								<cl-select
									v-model="search.user_id"
									placeholder="请选择"
									filterable
									style="width: 150px"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in userList"
										:key="item.user_id"
										:label="item.user_name"
										:value="item.user_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="来源渠道">
								<cl-select
									v-model="search.channel_id"
									placeholder="请选择"
									filterable
									style="width: 150px"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in sourceList"
										:key="item.id"
										:label="item.cname"
										:value="item.id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="定金状态">
								<cl-select
									v-model="search.deposit_status"
									placeholder="请选择"
									style="width: 150px"
									clearable
									@change="refresh"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="(item, index) in depositStatusList"
										:key="index"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="客户关键字">
								<el-input
									v-model="search.cus_name"
									placeholder="手机号/微信号/客户名称/会员号"
									clearable
									style="width: 220px"
									@change="refresh()"
								/>
							</cl-filter>
							<cl-filter label="下定时间">
								<cl-date-picker
									v-model="search.time"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									style="width: 210px"
									:clearable="false"
									@change="refresh"
								/>
							</cl-filter>
						</cl-filter-group>
					</el-row>
				</cl-title-module>
			</template>
			<!-- 数据表格 -->
			<cl-table id="appointmentAdvisory" v-bind="table">
				<template #column-dep_status="{ scope: { row } }">
					{{ row.dep_status | filterYn }}
				</template>
				<cl-empty slot="empty" />
			</cl-table>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
import { cloneDeep } from "cl-admin/utils";
import { exportJsonToExcel } from "@/utils/excel";
import { delEmptyChildren } from "@/utils";
import dayjs from "dayjs";
const statusType = {
	0: { text: "未使用" },
	1: { text: "已使用" },
	2: { text: "已退" },
	3: { text: "取消" },
	5: { text: "退回中" }
};
const filterYn = (val, key = "text") => {
	return statusType[val] ? statusType[val][key] : "";
};
export default {
	data() {
		return {
			printParams: {
				id: "appointmentAdvisory",
				popTitle: "定金明细-咨询"
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [],
				props: {
					maxHeight: 500
				}
			},
			initColumns: [
				{
					label: "序号",
					type: "index",
					width: 50,
					fixed: true,
					disable: true
				},
				{
					label: "所属事业部",
					prop: "biz_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "分公司",
					prop: "company_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "品牌",
					prop: "bra_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "下定金时间", prop: "dep_date", width: 100 },
				{
					label: "门店",
					prop: "dept_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "来源",
					prop: "source_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "归属",
					prop: "id_add_user_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "金额(￥)",
					prop: "dep_amount",
					width: 100
				},
				{ label: "收款方式", prop: "pay_type_name", width: 100 },
				{ label: "状态", prop: "dep_status", width: 100 },
				{
					label: "客户",
					prop: "cus_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				}
			],
			depositStatusList: [
				{ label: "未使用", value: 0 },
				{ label: "已使用", value: 1 },
				{ label: "已退", value: 2 },
				{ label: "取消", value: 3 },
				{ label: "退回中", value: 5 }
			],
			search: {
				cus_name: "",
				dept_ids: [],
				biz_id: "", //事业部
				company_id: "",
				bra_id: [],
				user_id: "",
				channel_id: "",
				// status: "",
				deposit_status: "",
				time: [
					dayjs()
						// .startOf("month")
						.format("YYYY-MM-DD"),
					dayjs()
						// .endOf("month")
						.format("YYYY-MM-DD")
				],
				time_from: "",
				time_to: ""
			},
			deptList: [],
			userList: [],
			sourceList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		const { initColumns } = this;
		this.search.biz_id = this.getCurrBiz();
		this.table.columns = cloneDeep(initColumns);
		this.init();
	},
	filters: {
		filterYn
	},
	methods: {
		filterYn,
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefCompany(biz_id);
			this.initData();
		},
		async initData() {
			const { biz_id } = this.search;
			this.getSourceList();
			this.getUserList();
			this.deptList = delEmptyChildren(
				(await this.$store.dispatch("common/getDept", {
					biz_id,
					needAll: false,
					needCascader: true
				})) || []
			);
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.deposit)
				.set("dict", {
					api: {
						page: "refundlist"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		async exportExcel() {
			const loading = this.$loading({
				lock: true,
				text: "正在下载报表中~"
			});
			const query = {
				...this.search,
				all_page: 1
			};
			const { list } = await this.$service.deposit.refundlist(query).catch((e) => {
				loading.close();
				throw e;
			});
			let tempColumns = this.table.columns.filter((e) => e.type != "index");
			if (list?.length > 0) {
				exportJsonToExcel(tempColumns, list, "定金明细咨询列表");
			}
			loading.close();
			// exportExcel("#appointmentAdvisory");
		},

		changeBiz() {
			this.search = {
				...this.search,
				dept_ids: [],
				company_id: "",
				bra_id: [],
				user_id: "",
				channel_id: ""
			};
			this.init();
			this.refresh();
		},
		changeDept() {
			this.search.user_id = "";
			this.getUserList();
			this.refresh();
		},
		// 获取归属人列表
		async getUserList() {
			const { biz_id } = this.search;
			let dept_id = this.search.dept_ids.join();
			this.userList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				biz_id,
				dept_id
			});
			this.userList = data;
		},
		//获取来源渠道
		async getSourceList() {
			const { biz_id } = this.search;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id });
			this.sourceList = data;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {
	.title-module {
		margin-bottom: 0;
		padding-bottom: 0;
	}
}
</style>
